﻿/* +----------------------------------------------------------------------
 * | 食色主页CSS [ 食色・分享味蕾的快乐 ]
 * +----------------------------------------------------------------------
 * | Copyright (c) 2014 http://shiseapp.com All rights reserved.
 * +----------------------------------------------------------------------
 * | Author: Gavin Foo <fuxiaopang@msn.com>
 * +----------------------------------------------------------------------
 */
 
@charset "utf-8";

body {
	margin: 0;
	background: url(http://matcha-resource.qiniudn.com/index_bg.jpg) repeat #181818;
	background-size: cover;
	color: #FFF;
	font-weight: lighter;
	font-family: "微软雅黑","黑体",sans-serif;
}

.hidden {
	display: none;
}

.show {
	display: block;
}

#left-content {
	float: left;
	width: 60%;
}

#right-content {
	float: right;
	width: 40%;
}

#left-content #title {
	margin-top: 145px;
	width: 263px;
	height: 195px;
	background: url(http://matcha-resource.qiniudn.com/shise_title.png);
}

#left-content .hr {
	margin: 20px 0;
	width: 65%;
	height: 1px;
	border-top: 1px solid #555;
}

#left-content #description {
	margin-bottom: 35px;
	font-size: 14px;
}

#left-content .down_button {
	margin-bottom: 10px;
	width: 166px;
	height: 59px;
	background: url(http://matcha-resource.qiniudn.com/down_button.jpg);
}

#left-content .down_button#kuaiyong {
	background: url(http://matcha-resource.qiniudn.com/down_button_kuai.jpg);
}

#left-content .down_button:hover {
	background-position: bottom;
}

#left-content .down_button#kuaiyong:hover {
	background-position: bottom;
}

#left-content .down_button a {
	display: block;
	min-width: 166px;
	min-height: 59px;
}

#right-content #phone #iphone {
	width: 422px;
	height: 826px;
	background: url(http://matcha-resource.qiniudn.com/iphone.png);
}

#right-content #phone #iphone #content {
	position: relative;
	top: 142px;
	left: 68px;
	width: 303px;
	height: 538px;
}

#right-content img {
	position: absolute;
}

#footer a {
	color: #FFF;
	text-decoration: none;
}

#footer a:hover {
	color: #CCC;
}

#ky-alert-outer {
	color: #000;
}

@media screen and (min-width:1000px) and (max-width:1440px) {
	body {
		zoom: .75;
	}
}

@media screen and (min-width:1000px) {
	body {
		animation: myfirst 30s linear infinite;
		-moz-animation: myfirst 30s linear infinite;
		-webkit-animation: myfirst 30s linear infinite;
		-o-animation: myfirst 30s linear infinite;
	}
@	keyframes myfirst {
		from{background-position: 0 100%;
	}

	to {
		background-position: 0 0;
	}
}

@-moz-keyframes myfirst {
	from {
		background-position: 0 100%;
	}

	to {
		background-position: 0 0;
	}
}

@-webkit-keyframes myfirst {
	from {
		background-position: 0 100%;
	}

	to {
		background-position: 0 0;
	}
}

@-o-keyframes myfirst {
	from {
		background-position: 0 100%;
	}

	to {
		background-position: 0 0;
	}
}

#contenter {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	margin: -400px 0 0 -500px;
	width: 1000px;
}

#footer {
	position: absolute;
	bottom: 150px;
	display: block;
	font-size: 12px;
}
}

@media screen and (max-width:1000px) {
	#contenter {
		display: block;
		margin: 0 auto;
		width: 500px;
	}

	#left-content {
		float: none;
		margin: 0 auto;
		width: 260px;
	}

	#left-content #title {
		margin-top: 75px;
	}

	#left-content #description {
		text-align: center;
	}

	#left-content #description span {
		display: block;
	}

	#left-content .hr {
		width: 100%;
	}

	#left-content .down_button {
		margin: 30px auto 20px auto;
	}

	#right-content {
		float: none;
		margin: 0 auto;
		width: 430px;
		height: 800px;
	}

	#footer {
		margin: 20px auto 20px auto;
		text-align: center;
		font-size: 12px;
	}

	.d_360 {
		text-align: center;
	}
}
